<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>消息列表</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    
    <link rel="stylesheet" href="/res/words/weui.css">
    <link rel="stylesheet" href="/res/words/jquery-weui.css">
    <link rel="stylesheet" href="/res/words/style.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_729135_t2loq20h12.css">
    
    <script src="/res/words/jquery.min.js"></script>
    <script src="/res/words/jquery-weui.min.js"></script>
    <script src="/res/words/vue.js"></script>

    <style>

    </style>
</head>
<body class="back1">
    <div  id="app">
        
        <div class="index-top-fix">
            <a href="{:url('index/gupiao.mycenter/mycenter')}" class="iconfont icon-left- left"></a>
            <p class="title">消息列表</p>
        </div>
        <div class="mt50"></div>
        <div class="result" style="overflow: auto;width: 100%;height: 100%;padding-bottom: 60px ">
        <div  v-for="(item,index) in items"  :data_id="item.id"  style="padding:10px 20px;border-bottom: 0.01rem solid #f4f4f4;overflow:hidden;background: white" onclick="details(this)">
                <span style="width: 30%;float: left;">
                    <img style="width: 60px;height: 60px;border-radius:100%; overflow:hidden;"  :src="item.new_avatar">
                </span>
                <span style="width: 65%;float: left;padding: 5px;line-height: 24px;">
                    <span style="font-size: 14px;color: black;font-weight: bold;float: left">{{item.new_time}}</span>
                    <span v-if="item.huifu==1" style="font-size: 12px;float: right;color: red">·&nbsp;new</span>
                    <br>
                    <span v-if="item.new_type==1" style="display: block;font-size: 13px;overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis;white-space:nowrap;">
                    {{item.new_content}}</span>
                    <span v-if="item.new_type==2" style="display: block;font-size: 13px;overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis;white-space:nowrap;">
                    [图片]</span>
                    <span v-if="item.new_type==3 || item.new_type==4" style="display: block;font-size: 13px;overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis;white-space:nowrap;">
                     [语音]</span>
                </span>
            </div>
            <!--滚动加载-->
                    <div class="weui-loadmore" v-if="is_loading" style="padding-bottom:20px;height:20px;">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips">正在加载</span>
                    </div>

                    <div class="weui-cells__title" v-if="is_none" style="text-align: center;margin-bottom: 20px">无更多数据</div>
        </div>
    </div>
</body>
<script>
    <!--滚动加载-->
    var app = new Vue({
        el: '#app',
        data: {
            //初始化
            items: [],
            is_loading: false,
            is_none: false,
            cur_page: 1,
            limit: 5,
        },
    });
    //滚动加载更多
    $(function () {
        //进入加载页面
        loadlist();
    });
    $('.back1').infinite().on('infinite', function () {
        console.log("加载");
        loadlist();
    });

    //ajax加载数据
    function loadlist() {
        if (!app.is_loading && app.is_none != true) {
            app.is_loading = true;
            $.post('{:url("loaddata")}', {page: app.cur_page, limit: app.limit}, function (res) {
                console.log(res);
                
                app.is_loading = false;
                if (res.count > 0) {
                    $('.result').show();
                    if(app.cur_page==1){
                        app.items=res.data;
                    }else {
                        for (var index in res.data) {
                            app.items.push(res.data[index]);
                        }
                    }


                    app.cur_page++;


                } else {
                    app.is_none = true;
                }

            });
        }

    }
// 留言详情
    function details(that) {
        console.log("232");
        var id=$(that).attr('data_id');
        //改变未读状态
        $.post("{:url('sort')}",{id:id},function(res){
            if(res.code==1){
                console.log("success");
            }else{
                console.log("faild");
            }
        })
        //请求页面
        var s="details/id/"+id;
        location.href=s;

    }
</script>
</html>

